<script setup lang="ts">
import { emitter } from '@/utils/eventBus'
import CrmNavigation from './Navigation.vue'
import DialogBox from './DialogBox.vue'

const showDrawer = ref(false)
const loading = ref(false)
const selectedChild = ref(null)
const currentConversation = ref(null)
const dialogBoxRef = ref(null)
const navigationRef = ref(null)

const setSelectTag = (val) => {
  // 主菜单切换逻辑
}

const selectChild = (child) => {
  selectedChild.value = child.uuid
  currentConversation.value = child
}

const handleDeleteChild = (parentValue, childUuid) => {
  if (selectedChild.value === childUuid) {
    selectedChild.value = null
    currentConversation.value = null
  }
}

const handleAddConversation = (newConversation) => {
  selectChild(newConversation)
}

const setAiDrawer = async (val) => {
  showDrawer.value = val
}

const hideAiDrawer = () => {
  showDrawer.value = false
  emitter.emit('showAiBtn')
}

defineExpose({ setAiDrawer })
</script>

<template>
  <transition name="drawer">
    <div class="scorllBox" v-if="showDrawer">
      <div class="drawer">
        <div class="primary-retract" @click="hideAiDrawer">
          <span>收</span>
          <span>起</span>
          <span class="white">
            <Icon icon="ep:arrow-right" color="#409eff" :size="10" />
          </span>
        </div>
        <div class="drawer-content" v-loading="loading">
          <div class="drawer-left">
            <CrmNavigation
              ref="navigationRef"
              :selectedChild="selectedChild"
              @setSelectTag="setSelectTag"
              @selectChild="selectChild"
              @deleteChild="handleDeleteChild"
              @addConversation="handleAddConversation"
            />
          </div>
          <div class="drawer-right">
            <DialogBox ref="dialogBoxRef" :currentConversation="currentConversation" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped lang="scss">
.scorllBox {
  position: fixed;
  bottom: -1px;
  right: 0;
  width: 85%;
  height: calc(100% - 86px);
  overflow: hidden;
  z-index: 9;
  box-shadow: 5px 5px 5px #888888;
  .drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    z-index: 999;
    .primary-retract {
      width: 40px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #0052cc;
      color: #fff;
      border-radius: 4px 0 0 4px;
      margin-top: 20%;
      font-size: 13px;
      .white {
        width: 12px;
        height: 12px;
        text-align: center;
        line-height: 12px;
        border-radius: 50%;
        background-color: #fff;
        margin-top: 5px;
      }
    }
    :deep(.drawer-content) {
      width: 100%;
      background-color: #f4f9fc;
      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
      display: flex;
      height: calc(100% - 12px);
      padding-top: 12px;
      overflow: hidden;
      .drawer-left {
        height: 100%;
      }
      .drawer-right {
        width: calc(100% - 204px);
        height: 100%;
        overflow: hidden;
        padding: 16px;
        box-sizing: border-box;
      }
    }
  }
}
.drawer-enter-active,
.drawer-leave-active {
  transition: transform 0.8s ease-out;
}
.drawer-enter-from,
.drawer-leave-to {
  transform: translateX(100%);
}
.container {
  z-index: 1;
  position: relative;
  flex: 1 1;
  background-color: #fff;
}
</style>
